<template>
  <el-row class="row">
    <el-col :span="6"><CardInfo :number="userCount" title="在册用户量" url="user" /></el-col>
    <el-col :span="6"><CardInfo :number="adminCount" title="管理员数量" url="admin" /></el-col>
    <el-col :span="6"><CardInfo :number="saleNum" title="今日销量" url="sale"/></el-col>
    <el-col :span="6"><CardInfo :number="ticketCount" title="今日客流量" url="userEnter" /></el-col>
  </el-row>
  <el-divider/>
  <el-row class="row">
    <el-popover
        placement="top-start"
        :width="200"
        trigger="hover"
    >
      新闻：{{newsCount}}<el-divider/>
      公告：{{announceCount}}
      <template #reference>
        <el-col :span="6"><CardInfo :number="newsCount+announceCount" title="新闻数量" url="news"/></el-col>
      </template>
    </el-popover>
    <el-popover
        placement="top-start"
        :width="200"
        trigger="hover"
    >
        湖：{{scenic.LAKE}}<br/>
        山：{{scenic.HILL}}<br/>
        花：{{scenic.FLOWER}}<br/>
        亭：{{scenic.KIOSK}}<br/>
        树：{{scenic.TREE}}<br/>
      <template #reference>
        <el-col :span="6"><CardInfo :number="scenicCount" title="景点数量" url="scenic"/></el-col>
      </template>
    </el-popover>
    <el-col :span="6"><CardInfo :number="sale" title="今日流水" url="money"/></el-col>
    <el-col :span="6"><Calibrate @refreshInfo="initInfo" number="点击开始" title="信息校准" url="cycle"/></el-col>
  </el-row>
</template>

<script>
import CardInfo from "@/views/homepage/admin/topCard/cardInfo";
import {
  getCountAccount,
  getCountArticle,
  getCountScenic,
  getCountScenicByType,
  getCountTickets,
  getSaleByTime, getSales
} from "@/api/analysis";
import Calibrate from "@/views/homepage/admin/topCard/cardInfo/calibrate";
export default {
  name: "topCard",
  components:{Calibrate, CardInfo},
  data(){
    return{
      userCount:0,
      adminCount:0,
      ticketCount:0,
      newsCount:0,
      announceCount:0,
      scenicCount:0,
      saleNum:0,
      sale:0,
      scenic:{
        'LAKE':0,
        'HILL':0,
        'FLOWER':0,
        'TREE':0,
        'KIOSK':0
      },

    }
  },
  mounted() {
    this.init()
  },
  methods:{
    initInfo(){
      this.init()
      this.$websocket.ws.send(JSON.stringify({toName:null,message:'clearReal'}));
    },
    init(){
      this.getAccountCount()
      this.getTicketCount()
      this.getArticleCount()
      this.getScenicCount()
      this.getSale()
      this.getSaleBet()
    },
    //获取用户量
    getAccountCount(){
      getCountAccount('USER').then(response =>{
        this.userCount=response.data.AllCount
      })
      getCountAccount('ADMIN').then(response =>{
        this.adminCount=response.data.AllCount
      })
    },
    //获取门票数
    getTicketCount(){
      getCountTickets('USING').then(response =>{
        this.ticketCount=response.data.AllCount
      })
    },
    //获取文章数量
    getArticleCount(){
      getCountArticle('NEWS').then(response=>{
        this.newsCount=response.data.AllCount
      })
      getCountArticle('ANNOUNCE').then(response=>{
        this.announceCount=response.data.AllCount
      })
    },
    //获取景点数量
    getScenicCount(){
      getCountScenic().then(response =>{
        this.scenicCount=response.data.AllCount
      })
      let that=this
     const scenicType=['LAKE', 'HILL', 'FLOWER', 'TREE', 'KIOSK']
      scenicType.forEach(function (value){
        getCountScenicByType(value).then(response =>{
          that.scenic[value] =response.data.AllCount
        })
      })
    },
    //获取某段时间内的销量
    getSale(){
      const timeForParse=new Date()
      const date1 = new Date(timeForParse.toDateString());
      const date2 = new Date((date1/1000+86400)*1000);
      getSaleByTime(date1,date2).then(response=>{
         this.saleNum=response.data.AllCount
       })
    },
    //获取某段时间内的销售额
    getSaleBet(){
      const timeForParse=new Date()
      const date1 = new Date(timeForParse.toDateString());
      const date2 = new Date((date1/1000+86400)*1000);
      getSales(date1,date2).then(response=>{
        this.sale=response.data.AllCount
      })
    }
  }
}
</script>

<style lang="less" scoped>
.row{
  height: 110px;
}
.image{
  border-radius: 50%;
  transition:  linear 0.3s;
  &:hover{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }
}
.div{
  line-height: 18px;
  color: rgba(0,0,0,.45);
  font-size: 16px;
  margin-bottom: 12px;
  font-weight: 650;
}
.text{
  line-height: 18px;
  color: rgba(0,0,0,.45);
  font-size: 20px;
  margin-bottom: 12px;
  font-weight: 650;
}
</style>
